<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{cas.mfa.googleauth.pagetitle}">Google Authentication Registration Review View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body id="cas">
<main class="container mt-3 mb-3">
    <div layout:fragment="content" id="login" class="mdc-card card p-4 m-auto w-lg-66">
        <h2 th:text="#{screen.authentication.gauth.register}">Your account is not registered.</h2>

        <!-- Confirmation Dialog -->
        <div th:replace="~{fragments/gauthConfirmation :: gauthConfirmation (
            dialogId='confirm-reg-dialog',
            title='screen.authentication.gauth.confirm.title', description='screen.authentication.gauth.confirm.desc',
            eventId='submit', confirmationType='create', actionButton='registerButton', actionButtonLabel='screen.welcome.button.register')}">
            <a href="fragments/gauthConfirmation.html">Confirm</a>
        </div>
        <!-- Confirmation Dialog -->
        
        <!-- Account Information -->
        <div class="row">
            <div class="col-md-5 text-center">
                <img id="imageQRCode" th:src="@{'data:image/jpeg;base64,' + ${QRcode}}"
                     th:alt="#{screen.authentication.gauth.qrimage}"/>
            </div>
            <div class="col-md-7">
                <div class="my-2" id="seckeypanel">
                    <p th:utext="#{screen.authentication.gauth.key(${key.getSecretKey()})}">Secret key to register is...</p>
                </div>
                <hr>
                <p th:text="#{screen.authentication.gauth.scratchcodes}">Scratch codes:</p>
                <div class="d-flex align-items-start mb-4">
                    <div class="mdc-chip-set" role="grid" id="scratchcodes">
                        <div th:each="code : ${key.getScratchCodes()}" class="mdc-chip" role="row">
                            <div class="mdc-chip__ripple"></div>
                            <span role="gridcell">
                              <span class="mdc-chip__text" name="gauth-scratchcode" th:text="${code}">Code</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column align-items-center">
            <div class="d-flex justify-content-center">
                <button class="mdc-button mdc-button--raised btn btn-primary me-2" name="confirm" id="confirm" accesskey="f"
                        onclick="cas.openDialog('confirm-reg-dialog')" value="Confirm">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.confirm}">Confirm</span>
                </button>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2" id="print" name="print" accesskey="p" type="button"
                        onclick="window.print();">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.print}">Print</span>
                </button>
                <button class="mdc-button mdc-button--outline btn btn-outline-secondary button-cancel" name="back" accesskey="c" type="button"
                        value="Cancel" id="cancel"
                        onclick="location.href = location.href;"
                        th:value="#{screen.pm.button.cancel}">
                    <span class="mdc-button__label" th:text="#{screen.pm.button.cancel}">Cancel</span>
                </button>
            </div>
        </div>
    </div>
</main>
</body>

</html>
